<template>
    <customNavigationBar title="订单详情" />

    <view class="page">
        <view class="helperInfomation">
            <view class="status">
                <image src="/static/common/icon_clock.png"></image>
                <span>进行中</span>
            </view>

            <view class="info">
                <view class="avatar">
                    <image src="/static/home/card_icon4.png" mode="aspectFill"></image>
                </view>

                <view class="text">
                    <view class="infos">
                        <span>{{ infomation?.riderName }}</span>
                        <span>{{ infomation?.riderSkills }}</span>
                        <!-- <span>管家：张翼德</span> -->
                    </view>

                    <view class="address">{{ infomation?.riderProvince }}{{ infomation?.riderCity }}{{ infomation?.riderDistrict }}</view>
                </view>
            </view>
        </view>

        <view class="infomation">
            <view class="title">用户信息</view>

            <view class="items">
                <view class="item">
                    <span>客户昵称</span>
                    <view>{{ infomation?.additionalExtendData.targetData.targetName }}</view>
                </view>
                <view class="item">
                    <span>客户手机</span>
                    <view>{{ infomation?.additionalExtendData.targetData.targetPhone }}</view>
                </view>
                <view class="item">
                    <span>订单地址</span>
                    <view>{{ infomation?.additionalExtendData.targetData.address }}</view>
                </view>
            </view>
        </view>

        <view class="infomation">
            <view class="title">订单信息</view>

            <view class="items">
                <view class="item">
                    <span>订单小区</span>
                    <view>{{ infomation?.community }}</view>
                </view>
                <view class="item">
                    <span>订单编号</span>
                    <view>{{ infomation?.orderNo }}</view>
                </view>
                <view class="item">
                    <span>接单日期</span>
                    <view>{{ infomation?.assignTime }}</view>
                </view>
                <view class="item">
                    <span>订单类型</span>
                    <view>{{ infomation?.serviceType }}</view>
                </view>
                <view class="item">
                    <span>支付方式</span>
                    <view v-if="infomation?.paymentMethod == 'alipay'">支付宝</view>
                    <view v-if="infomation?.paymentMethod == 'wechat'">微信</view>
                </view>
                <view class="item">
                    <span>运营中心提成</span>
                    <view>￥{{ infomation?.operationCommission }}</view>
                </view>
                <view class="item">
                    <span>悦居管家提成</span>
                    <view>￥{{ infomation?.stewardCommission }}</view>
                </view>
            </view>
        </view>
    </view>
    <view class="bottom" v-if="role == 2">
        <!-- <view class="submit1" @click="phoneCall">联系管家</view> -->
        <view class="submit" @click="changeHelper">更换帮手</view>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { judgeIosPermission } from '@/utils/permission.js';
import { homeApis } from '../../utils/apis';

const orderId = ref('');
onLoad((e) => {
    orderId.value = e.id;
    getData();
});

onShow(() => {
    uni.$on('changeHelperSuccess', () => {
        uni.showModal({
            showCancel: false,
            title: '帮手更换成功',
            confirmText: '我知道了',
            confirmColor: '#2C72FF'
        });

        uni.$off('changeHelperSuccess');
    });
});

const role = uni.getStorageSync('userRole');
const infomation = ref(null);
const getData = async () => {
    let res = await homeApis.getRiderOrderDetail(orderId.value);
    res.data.additionalExtendData = JSON.parse(res.data.additionalExtendData);
    infomation.value = res.data;
};

const phoneCall = () => {
    uni.makePhoneCall({
        phoneNumber: '114' //仅为示例
    });
};

const changeHelper = () => {
    uni.navigateTo({
        url: '/pages_home/changeHelper/changeHelper?riderId=' + infomation.value.riderId + '&orderId=' + orderId.value
    });
};
</script>
<style>
page {
    background: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.bottom {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    padding: 36rpx 32rpx;
    display: flex;
    justify-content: flex-end;
    gap: 24rpx;
    align-items: center;
    background-color: #fff;
    .submit {
        width: 252rpx;
        height: 80rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 2rpx solid #ffff;
        background-color: #2c72ff;
        font-size: 28rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
    }

    .submit1 {
        width: 252rpx;
        height: 80rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        border: 2rpx solid #2c72ff;
        font-size: 28rpx;
        color: #2c72ff;
        line-height: 80rpx;
        text-align: center;
    }
}

.page {
    padding: 14rpx 24rpx;
    padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
}

.helperInfomation {
    width: 100%;
    padding: 20rpx 20rpx 30rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .status {
        display: flex;
        align-items: center;
        gap: 20rpx;
        image {
            width: 40rpx;
            height: 40rpx;
        }
        span {
            font-size: 24rpx;
            color: #2c72ff;
        }
    }

    .info {
        margin-top: 14rpx;
        display: flex;
        justify-content: space-between;
        gap: 24rpx;
        .avatar {
            width: 110rpx;
            height: 110rpx;
            background: #999999;
            overflow: hidden;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            image {
                width: 110rpx;
                height: 110rpx;
            }
        }

        .text {
            flex: 1;
            position: relative;
            .infos {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 24rpx;
                    color: #000000;
                }
            }
            .address {
                position: absolute;
                bottom: 0;
                left: 0;
                font-size: 24rpx;
                color: #000000;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
}

.infomation {
    margin-top: 24rpx;

    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 28rpx 20rpx;
    .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
    }

    .items {
        margin-top: 20rpx;

        .item {
            margin-bottom: 24rpx;
            display: flex;
            justify-content: space-between;
            span {
                font-size: 28rpx;
                color: #999999;
                line-height: 40rpx;
                text-align: left;
            }
            view {
                max-width: 70%;
                font-weight: 400;
                font-size: 28rpx;
                color: #000000;
                line-height: 40rpx;
                text-align: right;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
</style>
